<!-- 明细 -->
<template>
  <publicPage>
    <view class="payDetailsPage">
      <view class="px-15 color8 disFlxJS headBox">
        <view>类型</view>
        <view>明细</view>
      </view>

      <scroll-view
        v-if="list && list.length"
        scroll-y
        class="bodyBox"
        style="height: calc(100% - 88rpx)"
        @scrolltolower="scrolltolower"
        refresher-enabled
        :refresher-triggered="refresherTriggered"
        @refresherrefresh="refresherrefresh"
      >
        <view
          v-for="(item, index) in list"
          :key="index"
          class="forBox pa-15 disFlxJS"
          @click="goDetails(item)"
        >
        <view>
            <view>
              <text>{{findType(item.type)}}</text>
              <text class="pl-9 colorred" v-show="item.type == 8"
                >({{ item.status  == 0 ? '审核中' : (item.status  == 2 ? '审核不通过' : '提现成功')}})</text
              >
            </view>
            <view class="color9 pt-5 fz-12">{{ item.createTime }}</view>
          </view>
          <view class="disFlxAC">
            <text v-if="item.pm == 0" class="colorred pr-5"
              >-{{ item.number || 0 }}</text
            >
            <text v-if="item.pm == 1" class="colororg pr-5"
              >+{{ item.number || 0 }}</text
            >
            <u-icon name="arrow-right" color="#AAABAB" />
          </view>
        </view>
      </scroll-view>
      <view
        class="defaultPage disFlxCC bodyBox"
        style="height: calc(100% - 88rpx)"
        v-if="!list.length && listLoad"
      >
        <view class="fz-18 color8">暂无记录</view>
      </view>
    </view> 
  </publicPage>
</template>

<script>
import playApi from "@/api/play.js";

export default {
  data() {
    return {
      list: [],
      listLoad: false, // 加载是否完成
      getParams: {
        pageNum: 1,
        pageSize: 15,
        total: 0
      },
      refresherTriggered: false,
      typeList: [
        {
          value: 1,
          label: '即时咨询'
        },
        {
          value: 2,
          label: '预约咨询'
        },
        {
          value: 3,
          label: '充值'
        },
        {
          value: 8,
          label: '提现'
        },
        {
          value: 9,
          label: '直播'
        },
        {
          value: 10,
          label: '退款'
        },
        {
          value: 11,
          label: '服务项目'
        },
        {
          value: 12,
          label: '平台充值'
        },
        {
          value: 13,
          label: '线下收款'
        }
      ]
    };
  },
  onLoad(){
    this.getList()
  },
  methods: {
    async getList(){
      try {
        const { data, total } = await playApi.billInfo(this.getParams)
        this.list = this.getParams.pageNum === 1 ? data : [...this.list, ...data];
        this.getParams.total = total;
        this.listLoad = true;
      } catch (error) {
        this.listLoad = true;
      }
    },
    findType(type){
      const obj = this.typeList.find(v=> v.value == type)
      return obj ? obj.label : ''
    },
    scrolltolower() {
      if (this.list.length !== this.getParams.total) {
        // u-view内部节流函数
        uni.$u.throttle(() => {
          this.getParams.pageNum++;
          this.getList();
          console.log(this.getParams.pageNum, "滚动加载");
        }, 500);
      } else {
        console.log("没有更多了");
      }
    },
    async refresherrefresh() {
      this.refresherTriggered = true;
      this.$data.getParams.pageNum = this.$options.data().getParams.pageNum
      this.$data.getParams.total = this.$options.data().getParams.total
      await this.getList();
      console.log(this.getParams.pageNum, "下拉刷新");
      setTimeout(() => {
        this.refresherTriggered = false;
      }, 1000);
    },
    // 跳转详情
    goDetails(item){
      this.$store.commit("SET_SESSIONOBJ", item);
      this.goPage('/pagesC/payDetails/details')
    }
  },

  created() {},

  computed: {},
};
</script>
<style lang='scss' scoped>
.payDetailsPage {
  height: 100%;
  .headBox {
    background-color: #f5f5f5;
    height: 88rpx;
    line-height: 88rpx;
  }
  .bodyBox {
    background-color: #ffffff;
    .forBox + .forBox {
      border-top: solid 1px #f5f5f5;
    }
    .colorred {
      color: #ff6b6b;
    }
    .colororg {
      color: #c5a028;
    }
  }
}
</style>